<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-10-21 16:27:37
 * @LastEditors: tc
 * @LastEditTime: 2022-03-18 15:49:43
-->
<template>
    <div class="middlebox">
        <div class="dengji-box">
            <div class="charts" id="charts" ref="circle"></div>
            <div class="turn turn01">
                <img src="@/assets/img/dashboard/zhuanzhuanzhuan.png" alt="">
            </div>
            <div class="turn turn02">
                <img src="@/assets/img/dashboard/zhuanzhuanzhuan.png" alt="">
            </div>
            <div class="turn turn03">
                <img src="@/assets/img/dashboard/zhuanzhuanzhuan.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            default: () => {}
        }
    },
    data() {
        return {
            charts:null
        }
    },
    watch: {
        data: {
            handler(val) {
                this.init()
            },
            deep:true
        }
    },
    mounted() {
    },
    unmounted() {
        this.charts.dispose()
    },
    methods: {
       init() {
            const that = this
            let myCharts = null
            myCharts = that.$echarts.init(that.$refs.circle)
            that.charts = myCharts
            // that.renderData(this.data)
            myCharts.off('click')
            myCharts.on('click','series.liquidFill' , params => {
                that.$emit('onRiskeve', params.data.type)
            })
            myCharts.setOption(that.setOption())
            window.addEventListener('resize', function() {
                myCharts.resize()
            })
        },
        setOption() {
            const that =this
            let option = {
                // legend: {
                //     data: [
                //         {
                //         name: '低风险水库',
                //         },
                //         {
                //         name: '中风险水库',
                //         },
                //         {
                //         name: '高风险水库',
                //         }
                //     ],
                //     textStyle:{
                //         color:'#fff'
                //     },
                //     orient:'vertical',
                //     type: "plain",
                //     top: 'middle',
                //     left:'75%',
                //     icon:'pin',
                // },
                series:[
                    {
                        type: 'liquidFill',
                        name: '低风险水库',
                        data: [{
                            value: 0.9,
                            custom : that.data.lower,
                            type:1
                        },{
                            value: 0.9,
                        },{
                            value: 0.9,
                        }],
                        //水波
                        color: [
                        '#0065D7',
                        '#0079D7',
                        '#17BE27'
                        ],
                        radius: '156px',
                        center: ['180px', '140px'],
                        backgroundStyle: {
                            color: '#0090FF',
                            // borderColor: '#17BE27',
                            // borderWidth: 0,
                        },
                        itemStyle: {
                            opacity: 0.7, // 波浪的透明度
                            shadowBlur: 0 // 波浪的阴影范围
                        },
                        label: {
                            formatter: function(params) {
                                return params.data.custom
                            },
                            color:'#fff',
                            fontSize: 36,
                        },
                        outline: {
                            itemStyle: {
                                borderColor: '#17BE27',
                                borderWidth: 0
                            },
                            borderDistance: 0
                        }
                    },
                    {
                        type: 'liquidFill',
                        name: '中风险水库',
                        data: [{
                            // value: that.data.middles / that.data.sum,
                            value: 0.9,
                            custom : that.data.middles,
                            type:2
                        },{
                            value: 0.9,
                        },{
                            value: 0.9,
                        }],
                        //水波
                        color: [
                        '#17BE27',
                        '#0079D7',
                        '#FF7E00'
                        ],
                        radius: '100px',
                        center: ['300px', '330px'],
                        backgroundStyle: {
                            color: '#0090FF',
                            // borderColor: '#002038',
                            // borderWidth: 5,
                        },
                        label: {
                            formatter: function(params) {
                                return params.data.custom
                            },
                            color:'#fff',
                            fontSize: 18
                        },
                        outline: {
                            itemStyle: {
                                borderColor: '#003F6F',
                                borderWidth: 0
                            },
                            borderDistance: 0
                        }
                    },
                    {
                        type: 'liquidFill',
                        name: '高风险水库',
                        data: [{
                            // value: that.data.hight / that.data.sum,
                            value: 0.9,
                            custom : that.data.hight,
                            type:3
                        },{
                            value: 0.9,
                        },{
                            value: 0.9,
                        }],
                        //水波
                        color: [
                        '#17BE27',
                        '#0079D7',
                        '#FF2323'
                        ],
                        radius: '75px',
                        center: ['100px', '390px'],
                        backgroundStyle: {
                            color: '#0090FF',
                            // borderColor: '#3D0F08',
                            // borderWidth: 5,
                        },
                        label: {
                            formatter: function(params) {
                                return params.data.custom
                            },
                            color:'#fff',
                            fontSize: 14
                        },
                        outline: {
                            itemStyle: {
                                borderColor: '#931100',
                                borderWidth: 0
                            },
                            borderDistance: 0
                        }
                    },
                ]
            }
            return option
        }
    }
}
</script>

<style lang="scss" scoped>
.middlebox {
    height: 100%;
    box-sizing: border-box;
    .dengji-box {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        height:100%;
        .charts {
            height: 100%;
            // border: 1px solid white;
        }
        .turn{
            position: absolute;
            >img {
                height: 100%;
                width: 100%;
            }     
        }
        .turn01 {
            left: 82px;
            top: 42px;
            width: 196px;
            height: 196px;
            animation:turn 12s linear infinite;
        }
        .turn02 {
            left: 237px;
            top: 267px;
            width: 126px;
            height: 126px;
            animation:turn 10s linear infinite;
        }
        .turn03 {
            left: 52px;
            top: 342px;
            width: 96px;
            height: 96px;
            animation:turn 8s linear infinite;
        }
        @keyframes turn{
            0%{-webkit-transform:rotate(0deg);}
            25%{-webkit-transform:rotate(90deg);}
            50%{-webkit-transform:rotate(180deg);}
            75%{-webkit-transform:rotate(270deg);}
            100%{-webkit-transform:rotate(360deg);}
        }
    }
}
</style>